<template>
  <a-layout  style="min-height: 100vh">
       <Sider></Sider>
    <a-layout>

    <a-layout-header class="headerBtn" style="background: #fff; padding: 0">
        <Header></Header>
    </a-layout-header>

    <a-layout-content>
        <!-- Breadcrumb面包屑 -->
        <a-breadcrumb  style="font-size:16px; font-weight: bold;">
          <a-breadcrumb-item>Home</a-breadcrumb-item>
          <a-breadcrumb-item>{{title}}</a-breadcrumb-item>

        </a-breadcrumb>

        <!-- router-view 使用路由控制 ,:key="$route.path" 刷新路由-->
        <router-view :key="$route.path"></router-view>
    </a-layout-content>

    <a-layout-footer>
        <Footer></Footer>
    </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import Footer from '../components/admin/Footer'
import Header from '../components/admin/Header'
import Sider from '../components/admin/Sider'
export default {
  components: { Footer, Header, Sider },
  // computed监控自己定义的变量, 即 面包屑title
  computed: {
    title () {
      return this.$route.meta.title
    }
  }
}
</script>

<style scoped>
.headerBtn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
